<template>
  <div class="userBox">
   <!-- <div>
      <van-button @click.native="changeType('zh')">切换中文</van-button>
      <van-button @click.native="changeType('en')">切换英文</van-button>
    </div> -->
    <div class="logoBox">
      <img class="logo" src="../../assets/images/logo.png" alt="">
    </div>
    <input-icon type="number" icon="phone" :placeholder="$t('user.telephone')" maxlength="11" v-model="phone"></input-icon>
    <input-icon :type="type" icon="password" :placeholder="$t('user.password')" maxlength="15" :iconRight="iconRight" v-model="pwd" @updateIcon="updateIcon"></input-icon>
    <van-row class="fontSize12" style="margin-top: 0.625rem;">
      <van-col :span="2">
        <van-checkbox v-model="isAgree" />
      </van-col>
      <van-col :span="20" style="margin-left: 0.3125rem">
        我已阅读并同意相关
        <span style="color: blue;" @click="toHome">条款和隐私政策</span>
      </van-col>
    </van-row>
    <van-button :class="phone === '' || pwd === '' ? 'van-buttons' : 'van-button'" class="userBoxBth" round block type="info" native-type="submit" @click="onSubmit">
      <van-loading type="spinner" v-if="loading" />
      <span v-else>{{$t('user.loginBtn')}}</span>
    </van-button>
    <div class="userAdmin">
      <span class="forgetPassword" @click="forgetPassword">{{$t('user.forgetPassword')}}？</span>
      <span class="register" @click="register">{{$t('user.register')}}</span>
      <div style="clear: both;"></div>
    </div>
  </div>
</template>

<script>
  import userApi from '../../api/userAPI.js'
  import myAPI from '../../api/myAPI.js'
  import dashbordAPI from '../../api/dashbordAPI.js'
  import inputIcon from '../../components/InputIcon.vue'
  export default {
    components: {
      inputIcon
    },
    data() {
        return {
          isAgree: false,
          checked: false,
          loading: false,
          iconRight: 'eyeOpen',
          type: 'password',
          phone: localStorage.getItem('phone') || '',
          pwd: localStorage.getItem('pwd') || ''
        };
      },
      methods: {
        // 查询隐私条款
        toHome() {
          localStorage.setItem('checkbox', this.isAgree)
          this.$router.push({
            name: 'PrivacyPolicy'
          })
        },
        // 获取本地推送标识信息
        getPushInfo() {
          var info = plus.push.getClientInfo();
          userApi.registerEquipment(info.clientid)
          console.log(info)
          console.log(info.clientid)
          plus.push.addEventListener( 'click', this.onPushClickCallback, true );
        },

        // 点击推送消息回调
        onPushClickCallback(msg) {
          localStorage.setItem('projectId', msg.payload.projectId)
          this.$router.push({
            name: 'Message',
            params: {
              type: msg.payload.type
            }
          })
        },
        changeType(type) {
          localStorage.setItem('locale', type)
          this.$i18n.locale = type
        },
        // 点击更新icon
        updateIcon(iconType) {
          this.pwd = this.pwd
          if (iconType === 'eyeOpen') {
            this.type = 'text'
            this.iconRight = 'eyeClose'
          } else {
            this.type = 'password'
            this.iconRight = 'eyeOpen'
          }
        },
        // 忘记密码跳转
        forgetPassword() {
          this.$router.push({
            path: '/ForgetPassword'
          })
        },
        // 注册页面跳转
        register() {
          this.$router.push({
            path: '/Register'
          })
        },
        // 提交登录
        onSubmit() {
          if (!this.isAgree) {
            this.$toast.fail('请先阅读隐私条款');
            return;
          }
          if (this.phone === '') {
            this.$toast.fail('手机号不能为空');
            return;
          }
          if (!(/^1[3456789]\d{9}$/.test(this.phone))) {
            this.$toast.fail('手机号格式不正确');
            return
          }
          if (this.pwd === '') {
            this.$toast.fail('密码不能为空');
            return
          }
          if (!(/^[A-Za-z0-9]{6,15}$/.test(this.pwd))) {
            this.$toast.fail('请输入6-15位数字或字母');
            return
          }
          this.loading = true
          userApi.login(this.phone, this.pwd).then(res => {
            this.getPushInfo()
            localStorage.setItem('userId', res.user.userId)
            localStorage.setItem('token', res.token)
            localStorage.setItem('userName', res.user.userName)
            localStorage.setItem('phone', this.phone)
            localStorage.setItem('pwd', this.pwd)
            if (res.projectId !== 0) {
              localStorage.setItem('projectId', res.projectId)
              myAPI.getUserInfo().then(resUserInfo => {
                localStorage.setItem('userStatus', resUserInfo.status)
                localStorage.setItem('userType', res.user.userType)
                localStorage.setItem('exitReason', resUserInfo.rejectedReason)
                if (res.user.userType === '01' || res.user.userType === '03') {
                  this.$router.push({
                    name: 'Dashbord'
                  })
                } else {
                  if (resUserInfo.id) {
                    if ((resUserInfo && resUserInfo.name && resUserInfo.joinProject === 1 && resUserInfo.passExam === 1) || (res.user.userType === '02' && resUserInfo.status === 4)) {
                      this.$router.push({
                        name: 'Dashbord',
                      })
                    }
                    if (localStorage.getItem('projectId')) {
                      dashbordAPI.getWorkTest(localStorage.getItem('projectId')).then(resMessage => {
                        localStorage.setItem('name', JSON.stringify(resMessage))
                        if (resMessage && resMessage.teamName) {
                          if (!resMessage.passExam) {
                            this.$router.push({
                              name: 'ApplyMessage',
                              params: {
                                value: 2
                              }
                            })
                          }
                        } else {
                          this.$router.push({
                            name: 'ApplyMessage',
                            params: {
                              value: 1,
                              buildId: resUserInfo.id
                            }
                          })
                        }
                      })
                    } else {
                      this.$router.push({
                        name: 'ApplyMessage',
                        params: {
                          value: 1,
                          buildId: resUserInfo.id
                        }
                      })
                    }
                  } else {
                    this.$router.push({
                      path: '/Apply'
                    })
                  }
                }
              })
            } else {
              this.$router.push({
                path: '/Apply'
              })
            }
          }).catch(err => {
            this.$toast.error(err)
          }).finally(() => {
            this.loading = false
          })
        },
      },
      mounted() {
        let checkbox = localStorage.getItem('checkbox')
        if (checkbox === 'true') {
          this.isAgree = true
        } else {
          this.isAgree = false
        }
      }
  }
</script>

<style scoped lang="scss">
.userAdmin{
  margin-top: 1.25rem;
  color: blue;
  font-size: 0.75rem;
  .register{
    float: right;
    color: #464FFF;
    text-decoration: underline;
  }
  .forgetPassword{
    float: left;
    color: #FF0000;
  }
}
</style>
